<template>
  <view>
    <uni-calendar
      ref="calendar"
      :insert="false"
      :start-date="startDate"
      :end-date="endDate"
      :range="mode === 'range'"
      @confirm="confirm"
    />

    <My-Base :is-show-icon-arrow="isShowIconArrow" :icon="icon">
      <template #header>
        <view>
          {{ title || '时间选择器标题' }}
        </view>
      </template>

      <template #content>
        <view class="timer-row">
          <view class="timer-content" @click="open">
            {{ value || '请选择时间' }}
          </view>

          <u-icon
            v-show="value && !disabled"
            color="#C0C4CC"
            name="close-circle-fill"
            size="{34}"
            @click="upDate('')"
          />
        </view>
      </template>
    </My-Base>
  </view>
</template>

<script>
import MyBase from 'common/formComponent/MyBase';

export default {
  name: 'MyTimePicker',

  components: {
    MyBase
  },

  model: {
    prop: 'value',
    event: 'update:value'
  },

  props: {
    title: {
      type: String,
      default: ''
    },

    mode: {
      type: String, // date range
      default: 'date'
    },

    startDate: { // 时间范围
      type: String,
      default: ''
    },

    disabled: {
      type: Boolean,
      default: false
    },

    endDate: { // 时间范围  2021-07-19
      type: String,
      default: ''
    },

    value: {
      type: String,
      default: ''
    },

    icon: {
      type: String,
      default: '' // moments
    },

    isShowIconArrow: {
      type: Boolean,
      default: true
    }

  },

  methods: {
    open() {
      if (!this.disabled) {
        this.$refs.calendar.open();
      }
    },

    upDate(value) {
      this.$emit('update:value', value);
    },

    confirm(e) {
      const {
        fulldate,
        range: {
          after,
          before
        }
      } = e;
      switch (this.mode) {
        case 'date':
          this.upDate(fulldate);
          break;

        case 'range':
          if (after && before) {
            this.upDate(`${before} 至 ${after}`);
          }
          break;

        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .timer-content {
    flex: 1;
  }
}
</style>
